<template>
  <div class="zong">
    <div class="tou">
      <el-page-header title="" @back="goBack" content="我的订单">
      </el-page-header>
    </div>
    <div class="zhong">
      <div class="list">
        <div class="xiao">
          <div class="zuo"></div>
          <div class="you">
            <div class="shang"></div>
            <div class="xia">
              <div class="price"></div>
              <div class="btn">
                <el-row>
                    <el-button size="mini">退款</el-button>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    goBack() {
      this.$router.push("/wode");
    },
  },
};
</script>
<style scoped>
.tou {
  height: 40px;
  background-color: rgb(196, 199, 202);
  padding-top: 20px;
  font-size: 16px;
  position: relative;
}
.zhong {
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
}
.list {
  width: 95%;
  height: 100px;
  background-color: rgb(233, 233, 233);
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
}
.xiao {
  width: 90%;
  background-color: aquamarine;
  display: flex;
}
.zuo {
  flex: 1;
  background-color: beige;
}
.you {
  flex: 4;
  display: flex;
  flex-direction: column;
}
.shang {
  flex: 1;
}
.xia {
  flex: 1;
  display: flex;
}
.price{
    flex: 2;
    background-color: aquamarine;
}
.btn{
    flex: 1;
    padding-top: 10px;
    padding-left: 30px;
    background-color: blueviolet;
}
</style>


